<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>代号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="dimensionmodelInJson.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>名称</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="dimensionmodelInJson.Name"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>序号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input :disabled="true" v-model="dimensionmodelInJson.Level"></el-input>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>类型</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input :disabled="true" :value="levelName"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>定价策略</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <DimensionPricingStrategySelector v-model="dimensionmodelInJson.PricingStrategy"/>
      </el-col>
    </el-row>
    <div>
      <DimensionGridEditor
        :RankEditable="dimensionmodelInJson.Level>5"
        ref="dge"
        :rowData="dimensiondetailInJson"
      />
    </div>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">
      <div>
        <el-button-group>
          <el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="addRow">增行</el-button>
          <el-button size="mini" :disabled="dimensiondetailInJson.length===0" @click="rmRow">删行</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;"></div>
  </el-dialog>
</template>
<script>
import DimensionPricingStrategySelector from '@/components/Selector/DimensionPricingStrategySelector.vue'
import DimensionGridEditor from '@/components/GridEditor/DimensionGridEditor.vue'

import { setDimension, get } from '@/api/dimension'
import { Model } from 'vue-property-decorator'

export default {
  components: {
    DimensionPricingStrategySelector,
    DimensionGridEditor
  },
  data() {
    return {
      dialogVisible: false,
      dimensionmodelInJson: {},
      dimensiondetailInJson: [],
      pickerVisible: false
    }
  },
  watch: {
    dimensionmodel: function(value) {
      this.dimensionmodelInJson = value
      if (this.dimensionmodelInJson && this.dimensionmodelInJson.AutoId > 0) {
        get(this.dimensionmodelInJson.AutoId)
          .then(response => {
            if (response.Result === 0) {
              console.log(response)
              this.dimensiondetailInJson = response.Detail
            } else {
              this.$alert(response.Message, '获取数据失败')
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.dimensiondetailInJson = []
      }
    }
  },
  computed: {
    levelName: function() {
      if (this.dimensionmodelInJson.Level <= 5) {
        return '档案型'
      } else {
        return '数值型'
      }
    }
  },
  props: { dimensionmodel: Object },
  methods: {
    onSubmit() {
      setDimension(this.dimensionmodelInJson, this.dimensiondetailInJson)
        .then(response => {
          if (response.Result === 0) {
            this.dimensionmodelInJson = response.Data
            this.dimensiondetailInJson = response.Detail
            this.$message('保存成功')
            this.$emit('dimensionSaveComplete', this.dimensionmodelInJson)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },

    addRow() {
      let minTmpid = 0
      let skip = false
      for (let idx in this.dimensiondetailInJson) {
        if (
          this.dimensiondetailInJson[idx].minTmpid &&
          this.dimensiondetailInJson[idx].minTmpid < minTmpid
        ) {
          minTmpid = this.dimensiondetailInJson[idx].minTmpid
        }
      }
      this.dimensiondetailInJson.push({
        AutoId: 0,
        minTmpid: minTmpid - 1,
        Dimension: this.dimensionmodelInJson.AutoId
      })
    },
    rmRow() {
      const selectedData = this.$refs.rge.getSelected()
      console.log(selectedData)
      if (selectedData.length === 0) {
        this.$message('请先选中需要删除的行')
        return
      }
      this.$confirm(
        '将会删除' + selectedData.length + '笔记录, 是否继续?',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
      )
        .then(() => {
          for (let idx in selectedData) {
            for (let rIdx in this.dimensiondetailInJson) {
              if (
                (selectedData[idx].minTmpid &&
                  this.dimensiondetailInJson[rIdx].AutoId) ||
                selectedData[idx].AutoId ===
                  this.dimensiondetailInJson[rIdx].AutoId
              ) {
                this.dimensiondetailInJson.splice(rIdx, 1)
                break
              }
            }
            console.log(this.dimensiondetailInJson)
          }
        })
        .catch(error => {})
    }
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>